import { ref, nextTick, computed } from 'vue'
import { 
  createGoodsSkusCardApi, 
  updateGoodsSkusCardApi,
  deleteGoodsSkusCardApi,
  createGoodsSkusCardValueApi,
  updateGoodsSkusCardValueApi,
  deleteGoodsSkusCardValueApi,
  sortGoodsSkusCardApi
} from '@/api/goods'
import { cartesianProductOf, useArrayMoveDown, useArrayMoveUp } from '@/utils'
import { chooseAndSetGoodsSkusCardApi } from '@/api/goods'

// 当前商品的id
export const goodsId = ref(0)
// 规格选项列表
export const sku_card_list = ref([])
// table列表
export const sku_list = ref([])
// 初始化规格选项列表
export function initSkuCardList(d) {
  sku_card_list.value = d.goodsSkusCard.map((item) => {
    item.text = item.name
    item.loading = false
    item.goodsSkusCardValue.map((v) => {
      v.text = v.value || '属性值'
      return v
    })
    return item
  })

  sku_list.value = d.goodsSkus
}

// 添加规格选项
export const btnLoading = ref(false)
export function addSkuCardEvent() {
  btnLoading.value = true
  createGoodsSkusCardApi({
    goods_id: goodsId.value,
    name: '规格选项',
    order: 50,
    type: 0
  }).then(res => {
    sku_card_list.value.push({
      ...res,
      text: res.name,
      loading: false,
      goodsSkusCardValue: []
    })
  }).finally(() => {
    btnLoading.value = false
  })
}

// 修改规格选项
export function handleUpdate(item) {
  item.loading = true
  updateGoodsSkusCardApi(item.id, {
    goods_id: item.goods_id,
    name: item.text,
    order: item.order,
    type: 0,
  }).then(res => {
    item.name = item.text
  }).catch(() => {
    item.text = item.name
  }).finally(() => {
    item.loading = false
  })
}

// 删除规格选项
export function handleDelete(item) {
  item.loading = true
  deleteGoodsSkusCardApi(item.id)
    .then(res => {
      const i = sku_card_list.value.findIndex(o => o.id === item.id)
      if(i !== -1) {
        sku_card_list.value.splice(i, 1)
      }
      getTableData()
    })
}

// 初始化规格值
export function initSkuCardItem(id) {
  const item = sku_card_list.value.find((o) => o.id == id)

  const inputValue = ref('')
  const inputVisible = ref(false)
  const InputRef = ref()
  const loading = ref(false)

  const handleClose = (tag) => {
    loading.value = true
    deleteGoodsSkusCardValueApi(tag.id)
      .then(res => {
        let i = item.goodsSkusCardValue.findIndex(o => o.id === tag.id)
        if(i !== -1) {
          item.goodsSkusCardValue.splice(i, 1)
        }

        getTableData()
      })
      .finally(() => {
        loading.value = false
      })

  }

  const handleChange = (value, tag) => {
    loading.value = true
    updateGoodsSkusCardValueApi(tag.id, {
      goods_skus_card_id: id,
      name: item.name,
      order: tag.order,
      value,
    }).then(res => {
      tag.value = value
      getTableData()
    }).catch((error) => {
      tag.text = tag.value
    }).finally(() => {
      loading.value = false
    })
  }

  const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
      InputRef.value.input.focus()
    })
  }

  const handleInputConfirm = () => {
    if(!inputValue.value) {
      inputVisible.value = false
      return
    }

    loading.value = true
    createGoodsSkusCardValueApi({
      goods_skus_card_id: id,
      name: item.name,
      order: 50,
      value: inputValue.value
    }).then(res => {
      item.goodsSkusCardValue.push({
        ...res,
        text: res.value
      })  
      getTableData()
    }).finally(() => {
      inputVisible.value = false
      inputValue.value = ''
      loading.value = false
    })
  }
  
  return {
    item,
    inputValue,
    inputVisible,
    InputRef,
    handleClose,
    showInput,
    handleInputConfirm,
    loading,
    handleChange
  }
}

// 排序规格
export const bodyLoading = ref(false)
export const sortCard = (action, index) => {
  const func = action == "up" ? useArrayMoveUp : useArrayMoveDown
  let oList = JSON.parse(JSON.stringify(sku_card_list.value))
  func(oList, index)
  bodyLoading.value = true
  sortGoodsSkusCardApi({
    sortdata: oList.map((item, index) => {
      return {
        id: item.id,
        order: index + 1
      }
    })
  })
  .then(res => {
    func(sku_card_list.value, index)
    getTableData()
  })
  .finally(() => bodyLoading.value = false)
}

// 选择设置规格
export function handleChooseSetGoodsSkuCard(id, data) {
  let item = sku_card_list.value.find(o => o.id === id)
  item.loading = true
  chooseAndSetGoodsSkusCardApi(id, data)
    .then((res) => {
      item.name = item.text = res.goods_skus_card.name
      item.goodsSkusCardValue = res.goods_skus_card_value.map((o) => {
        o.text = o.value || '属性值'
        return o
      })
      getTableData()
    })
    .finally(() => {
      item.loading = false
    })
}

// 初始化表格
export function initSkuTable() {
  const skuLabels = computed(() => sku_card_list.value.filter(v => v.goodsSkusCardValue.length > 0))

  // 表头数据
  const tableThs = computed(() => {
    let length = skuLabels.value.length

    return [
      {
        name: '商品规格',
        colspan: length,
        width: '',
        rowspan: length > 0 ? 1 : 2
      },
      {
        name: '销售价',
        width: '100',
        rowspan: 2
      },
      {
        name: '市场价',
        width: '100',
        rowspan: 2
      },
      {
        name: '成本价',
        width: '100',
        rowspan: 2
      },
      {
        name: '库存',
        width: '100',
        rowspan: 2
      },
      {
        name: '体积',
        width: '100',
        rowspan: 2
      },
      {
        name: '重量',
        width: '100',
        rowspan: 2
      },
      {
        name: '编码',
        width: '100',
        rowspan: 2
      }
    ]
  })

  return {
    tableThs,
    skuLabels,
    sku_list
  }
}

// 获取规格表格数据
function getTableData() {
  setTimeout(() => {
    if (sku_card_list.value.length === 0) return []
  
    let list = []
    sku_card_list.value.forEach(o => {
      if (o.goodsSkusCardValue && o.goodsSkusCardValue.length > 0) {
        list.push(o.goodsSkusCardValue)
      }
    })
    if (list.length == 0) return []
  
    let arr = cartesianProductOf(...list)
    
    // 获取之前的规格列表，将规格ID排序之后转化为字符串
    let beforeSkuList = JSON.parse(JSON.stringify(sku_list.value)).map(o => {
      // 后端返回的对象，前端将对象转换为数组
      if(!Array.isArray(o.skus)) {
        o.skus = Object.keys(o.skus).map(k => o.skus[k])
      }
      o.skusId = o.skus.sort((a, b) => a.id - b.id).map(s => s.id).join(',')  
      return o
    })

    sku_list.value = []
    sku_list.value = arr.map(skus => {
      let o = getBeforeSkuItem(JSON.parse(JSON.stringify(skus)), beforeSkuList)
      return {
        skus,
        image: o ? o.image : "",
        pprice: o ? o.pprice : 0,
        oprice: o ? o.oprice : 0,
        cprice: o ? o.cprice : 0,
        stock: o ? o.stock : 0,
        volume: o ? o.volume : 0,
        weight: o ? o.weight : 0,
        code: o ? o.code : '',
        goods_id: goodsId.value
      }
    })
  }, 200)
}

function getBeforeSkuItem(skus, beforeSkuList) {
  let skusId = skus.sort((a, b) => a.id - b.id).map(s => s.id).join(',')
  return beforeSkuList.find(o => {
    if(skus.length > o.skus.length) {
      return skusId.indexOf(o.skusId) !== -1
    }

    return o.skusId.indexOf(skusId) !== -1
  })
}